import React, { useState, useImperativeHandle, forwardRef, useEffect } from 'react';
import { Row, Col, Button, Space, Tabs, Input, InputNumber } from 'antd';
import { connect } from 'umi';
import { goodsType_status } from '@/common/contact'
import TableDataBlock from '@/components/TableDataBlock';
import { DragHandle } from '@/components/TableDataBlock/SortBlock';
import SelectModel from '@/components/PackagingModel/components/SelectModel'
const SettingOpeational = (props, ref) => {
  const { detail = {}, defaultDataList = [], disabled = false, } = props
  const [data, setData] = useState([])
  const [visible, setVisible] = useState(false)
  const [sortType, setSortType] = useState(true)
  useImperativeHandle(ref, () => {
    return {
      getPrizeList: () => {
        return data.map((item, index) => {
          const { prizeName, id, skuid, prizeStock, goodsName, skuProperty, cover, goodsType
          } = item
          return {
            goodsSkuName: skuProperty,
            goodsName: goodsName,
            prizeStock,
            prizeName,
            prizeGoodsId: id,
            prizeGoodsSkuId: skuid,
            sortValue: index,
            goodsCover: cover,
            goodsType: goodsType
          }
        })
      }
    }
  })

  const getColumns = [
    {
      title: '排序',
      dataIndex: 'sort',
      render: () => {
        return <DragHandle></DragHandle>
      }
    },
    {
      title: '奖品',
      dataIndex: 'goodsName',
    }, {
      title: '类型',
      dataIndex: 'goodsType',
      render: (val) => {
        return goodsType_status[val]
      },
    },
    {
      title: '奖品名称',
      dataIndex: 'prizeName',
      render: (val, record) => {
        return <Input onFocus={() => { setSortType(false) }} onBlur={() => { setSortType(true) }} disabled={disabled} onChange={(e) => {
          handleSetInput({
            key: 'prizeName',
            value: e.target.value,
            record: record
          })
        }} value={val} />
      },
    },
    {
      title: '份数',
      dataIndex: 'prizeStock',
      render: (val, record) => {
        return <InputNumber onFocus={() => { setSortType(false) }} onBlur={() => { setSortType(true) }} disabled={disabled} onChange={(e) => {
          handleSetInput({
            key: 'prizeStock',
            value: e,
            record: record
          })
        }} value={val} min={1} max={200} />
      },
    }, {
      type: 'handle',
      width: 200,
      dataIndex: 'id',
      render: (val, record) => [
        {
          title: '移除',
          disabled: disabled,
          click: () => {
            handleRemove(record)
          }
        }]
    }]
  useEffect(() => {
    if (defaultDataList.length > 0) {
      setData(defaultDataList)
    }

  }, [])
  const handeleList = (e) => {
    setData(Object.values(e).reduce((item, val) => {
      return [...item, ...val]
    }, []))

  }

  const setSelectList = () => {
    return data.reduce((item, val) => {
      const { goodsType } = val
      if (item[goodsType]) {
        item[goodsType].push({ ...val })
        return item
      } else {
        item[goodsType] = []
        item[goodsType].push({ ...val })
        return item
      }
    }, {})
  }
  const handleRemove = (record) => {
    const { id, goodsType, prizeGoodsId } = record
    setData(data.filter(item => {
      if (goodsType === item.goodsType && (id === item.id || prizeGoodsId === item.id || prizeGoodsId === item.prizeGoodsId)) {
        return false
      } else {
        return true
      }

    }))
  }
  const handleSetInput = (values) => {
    const { record, value, key } = values
    const { goodsType, id } = record
    setData(data.map(item => {
      if (goodsType === item.goodsType && id === item.id) {
        return {
          ...item,
          [key]: value
        }
      } else {
        return item
      }

    }))
  }
  return (
    <Row style={{ marginBottom: 24 }}>
      <Col style={{ textAlign: 'right' }} span={3}>
        奖品设置:
      </Col>
      <Col style={{ marginLeft: 4 }} gutter={[24, 24]}>
        <Button
          disabled={disabled}
          onClick={() => {
            setVisible({ show: true, details: setSelectList() });
          }}
        >

          +添加奖品
        </Button>
      </Col>
      <Col style={{ marginTop: 12, color: '#999999' }} offset={3} span={21}>1.拖拽奖品列表可调整奖品在直播间的展示顺序；</Col>
      <Col style={{ marginTop: 12, color: '#999999' }} offset={3} span={21}>2.一轮抽奖最多可设置5种奖品，每种奖品最多设置200份；</Col>
      <Col style={{ marginTop: 12, color: '#999999' }} offset={3} span={21}>3.用户抽奖15天内可领取奖品，过期将无法兑换。</Col>
      <Col style={{ marginTop: 12 }} offset={3} span={21}>
        <TableDataBlock
          tableSort={sortType ? {
            key: 'id',
            onSortEnd: (e) => {
              setData(e)
            }
          } : null}
          columns={getColumns}
          rowKey={(record) => `${record.id}`}
          list={data}
        ></TableDataBlock>
      </Col>
      <SelectModel onOk={handeleList} visible={visible} data={detail} onClose={() => setVisible(false)}></SelectModel>
    </Row>
  )
};
export default forwardRef(SettingOpeational)